import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Tooltip, Form, Button, Progress, Spin } from 'antd';
import styles from "./index.less";
import icon1 from '@/assets/medicalKnowledge/icon1.png';
import icon2 from '@/assets/medicalKnowledge/22.png';
import icon3 from '@/assets/medicalKnowledge/23.png';
import icon4 from '@/assets/medicalKnowledge/24.png';
import icon5 from '@/assets/medicalKnowledge/25.png';
import icon6 from '@/assets/medicalKnowledge/26.png';
import icon7 from '@/assets/medicalKnowledge/27.png';
import bj from '@/assets/medicalKnowledge/bj.png';
import { switchCase } from '@babel/types';
const bgBround = {
  background: 'url(' + bj + ')',
  width: '100%',
  height: '100%',
  backgroundSize: '100% 100%',
}

class MedicalKnowledge extends Component {
  constructor(props) {
    super(props);
    this.state = {
      border: false,
      border1: false,
      border2: false,
      border3: false,
      border4: false,
      border5: false,
      border6: false,
      leName: 0, // 显示多少分图案
      xsName: 0, // 显示多少分文字
      ProgressQH: true,
      ProgressWZ: true,
      checkTime: '',
      summary: '',
      text: '',
      text1: '',
      text2: '',
      text3: '',
      text4: '',
      text5: '',
      text6: '',
      percent: '',
      num: '',
      logins: true
    };
  }

  componentDidMount() {
    this.fetch()
    // this.time()

  }

  jun = (a) => {
    setTimeout(() => {
      if (a <= this.state.leName) {
        a = a + 1
        this.setState({
          percent: a,
          xsName: a,
        }, () => {
          this.jun(a)
        })
      } else {
        this.setState({ ProgressQH: false, })
      }
    }, 10)
  }

  // eslint-disable-next-line react/sort-comp
  fetch = () => {

    setTimeout(() => {

      const { dispatch, currentUser } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'medicalKnowledge/fetch',
          payload: {},
          callback: res => {
            console.log('列表数据', res);
            let arr = res.resList
            arr.map((item) => {
              switch (item.key) {
                case 'CHECK_AVG_SIMILAR_QUES':
                  this.setState({ border: item.warnning, text: item.text })
                  break;
                case 'CHECK_QA_TOTAL':
                  this.setState({ border1: item.warnning, text1: item.text })
                  break;
                case 'CHECK_NO_ANS_QUES':
                  this.setState({ border2: item.warnning, text2: item.text })
                  break;
                case 'CHECK_UNKNOW_QUES':
                  this.setState({ border3: item.warnning, text3: item.text })
                  break;
                case 'CHECK_UNSOLVED_QUES':
                  this.setState({ border4: item.warnning, text4: item.text })
                  break;
                case 'CHECK_ABNORMAL_QUES':
                  this.setState({ border5: item.warnning, text5: item.text })
                  break;
                case 'CHECK_SIMILAR_QUES':
                  this.setState({ border6: item.warnning, text6: item.text })
                  break;

              }
            })
            this.setState({
              leName: res.score,
              // percent: res.score,
              // xsName: res.score,
              percent: res.score,
              xsName: res.score,
              checkTime: res.checkTime,
              summary: res.summary,
              // border: res.resList[0].warnning,
              // border1: res.resList[1].warnning,
              // border2: res.resList[2].warnning,
              // border3: res.resList[3].warnning,
              // border4: res.resList[4].warnning,
              // border5: res.resList[5].warnning,
              // border6: res.resList[6].warnning,
              // text: res.resList[0].text,
              // text1: res.resList[1].text,
              // text2: res.resList[2].text,
              // text3: res.resList[3].text,
              // text4: res.resList[4].text,
              // text5: res.resList[5].text,
              // text6: res.resList[6].text,
              // ProgressQH: false,
            }, () => {

              if (res.isStoped) {
                // 已结束
                this.setState({ ProgressQH: true, ProgressWZ: false, leName: this.state.xsName, logins: false }, () => {
                  this.jun(0)
                })
              } else {
                this.time()
              }
            })
          },
        });
      });
    }, 500)
  }

  fetchB = () => {
    this.setState({
      percent: 100
    }, () => {

    })
    setTimeout(() => {
      const { dispatch, currentUser } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'medicalKnowledge/fetch',
          payload: {},
          callback: res => {
            console.log('列表数据', res);
            let arr = res.resList
            arr.map((item) => {
              switch (item.key) {
                case 'CHECK_AVG_SIMILAR_QUES':
                  this.setState({ border: item.warnning, text: item.text })
                  break;
                case 'CHECK_QA_TOTAL':
                  this.setState({ border1: item.warnning, text1: item.text })
                  break;
                case 'CHECK_NO_ANS_QUES':
                  this.setState({ border2: item.warnning, text2: item.text })
                  break;
                case 'CHECK_UNKNOW_QUES':
                  this.setState({ border3: item.warnning, text3: item.text })
                  break;
                case 'CHECK_UNSOLVED_QUES':
                  this.setState({ border4: item.warnning, text4: item.text })
                  break;
                case 'CHECK_ABNORMAL_QUES':
                  this.setState({ border5: item.warnning, text5: item.text })
                  break;
                case 'CHECK_SIMILAR_QUES':
                  this.setState({ border6: item.warnning, text6: item.text })
                  break;
              }
            })

            this.setState({
              leName: res.score,
              // percent: res.score,
              // xsName: res.score,
              percent: res.score,
              xsName: res.score,
              checkTime: res.checkTime,
              summary: res.summary,
              // border: res.resList[0].warnning,
              // border1: res.resList[1].warnning,
              // border2: res.resList[2].warnning,
              // border3: res.resList[3].warnning,
              // border4: res.resList[4].warnning,
              // border5: res.resList[5].warnning,
              // border6: res.resList[6].warnning,
              // text: res.resList[0].text,
              // text1: res.resList[1].text,
              // text2: res.resList[2].text,
              // text3: res.resList[3].text,
              // text4: res.resList[4].text,
              // text5: res.resList[5].text,
              // text6: res.resList[6].text,
              // ProgressQH: false,
              // logins:false
            }, () => {
              this.jun(0)
            })
          },
        });
      });
    }, 500)
  }

  detection = () => {
    this.setState({
      leName: 0,
      ProgressQH: true,
      ProgressWZ: true,
      percent: 0,
      border: false,
      border1: false,
      border2: false,
      border3: false,
      border4: false,
      border5: false,
      border6: false,
      percent: 0,
      xsName: 0,
    }, () => {
      const { dispatch, currentUser } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'medicalKnowledge/retest',
          payload: {},
          callback: res => {
            console.log('重新检测', res);
            this.timeB()
          },
        });
      });
    })
  }

  time = () => {
    let { leName } = this.state
    setTimeout(() => {
      const { dispatch, currentUser } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'medicalKnowledge/knowledgeExamineCheckProcess',
          payload: {},
          callback: res => {
            console.log('进度条', res);
            leName = res.process   // 联调打开 
            if (res.process === 1) {
              this.setState({ num: res.process, logins: false }, () => {
                this.setState({ ProgressQH: true, ProgressWZ: false, leName: this.state.xsName }, () => {
                  this.fetch()
                })
              })
            } else if (res.process === 0) {
              this.setState({ percent: res.process, logins: false }, () => {
                setTimeout(() => {
                  this.setState({ num: res.process }, () => {
                    this.time()
                  })
                }, 1000)
              })
            } else {
              const number = res.process
              console.log(Math.floor(Number(number * 100)))
              this.setState({ percent: Math.floor(Number(number * 100)) }, () => {
                setTimeout(() => {
                  this.setState({ num: res.process }, () => {
                    this.time()
                  })
                }, 1000)
              })
            }
          },
        });
      });

    }, 50)
  }

  timeB = () => {
    let { leName } = this.state
    setTimeout(() => {
      const { dispatch, currentUser } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'medicalKnowledge/knowledgeExamineCheckProcess',
          payload: {},
          callback: res => {
            console.log('进度条', res);
            leName = res.process   // 联调打开 
            if (res.process === 1) {
              this.setState({ num: res.process }, () => {
                this.setState({ ProgressQH: true, ProgressWZ: false, leName: this.state.xsName }, () => {
                  this.fetchB()
                })
              })
            } else if (res.process === 0) {
              this.setState({ percent: res.process }, () => {
                setTimeout(() => {
                  this.setState({ num: res.process }, () => {
                    this.timeB()
                  })
                }, 1000)
              })
            } else {
              const number = res.process
              console.log(Math.floor(Number(number * 100)))
              this.setState({ percent: Math.floor(Number(number * 100)) }, () => {
                setTimeout(() => {
                  this.setState({ num: res.process }, () => {
                    this.timeB()
                  })
                }, 1000)
              })
            }
          },
        });
      });

    }, 50)
  }

  similarAsk = () => {  // 相似问少跳转
    const { dispatch } = this.props;
    dispatch(routerRedux.push({
      pathname: '/knowledge/overview',
      params: { sortType: 'questionCount' }
    }));
  }

  answer = () => { // 缺少答案跳转
    const { dispatch } = this.props;
    dispatch(routerRedux.push({
      pathname: '/knowledge/overview',
      params: { sortType: 'noAnswer' }
    }));
  }

  questionNumber = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({
      pathname: '/knowledge/overview',
    }));
  }

  unknownProblem = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({
      pathname: '/capacity/waitingLearningIssue',
    }));
  }

  unresolvedProblem = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({
      pathname: '/capacity/waitingLearningIssue',
      params: { id: '2' }
    }));
  }

  unusualTime = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({
      pathname: '/capacity/medicalKnowledge/detail',
      params: { id: '2' }
    }));
  }

  similarityIssue = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({
      pathname: '/capacity/medicalKnowledge/detail',
      params: { id: '1' }
    }));
  }


  render() {
    // 相似问
    const divStyle = {
      marginBottom: 0, color: this.state.border === false ? '#00c7ff' : '#cc0000', fontWeight: 600,fontSize:16 
    };
    const spanStyle = {
      marginBottom: 0, color: this.state.border === false ? '#a9a9a9' : '#ff9842'
    };
    // 问题数量
    const divStyle1 = {
      marginBottom: 0, color: this.state.border1 === false ? '#00c7ff' : '#cc0000', fontWeight: 600,fontSize:16 
    };
    const spanStyle1 = {
      marginBottom: 0, color: this.state.border1 === false ? '#a9a9a9' : '#ff9842'
    };
    // 缺少答案
    const divStyle2 = {
      marginBottom: 0, color: this.state.border2 === false ? '#00c7ff' : '#cc0000', fontWeight: 600,fontSize:16 
    };
    const spanStyle2 = {
      marginBottom: 0, color: this.state.border2 === false ? '#a9a9a9' : '#ff9842'
    };
    // 未知问题
    const divStyle3 = {
      marginBottom: 0, color: this.state.border3 === false ? '#00c7ff' : '#cc0000', fontWeight: 600,fontSize:16 
    };
    const spanStyle3 = {
      marginBottom: 0, color: this.state.border3 === false ? '#a9a9a9' : '#ff9842'
    };
    // 未解决问题
    const divStyle4 = {
      marginBottom: 0, color: this.state.border4 === false ? '#00c7ff' : '#cc0000', fontWeight: 600,fontSize:16 
    };
    const spanStyle4 = {
      marginBottom: 0, color: this.state.border4 === false ? '#a9a9a9' : '#ff9842'
    };
    // 异常问法
    const divStyle5 = {
      marginBottom: 0, color: this.state.border5 === false ? '#00c7ff' : '#cc0000', fontWeight: 600,fontSize:16 
    };
    const spanStyle5 = {
      marginBottom: 0, color: this.state.border5 === false ? '#a9a9a9' : '#ff9842'
    };
    // 相似问法
    const divStyle6 = {
      marginBottom: 0, color: this.state.border6 === false ? '#00c7ff' : '#cc0000', fontWeight: 600,fontSize:16 
    };
    const spanStyle6 = {
      marginBottom: 0, color: this.state.border6 === false ? '#a9a9a9' : '#ff9842'
    };


    return (
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper>
          {/* <div className={styles.backgroundp}> */}
          <Spin spinning={this.state.logins}>
            <Row className='paddingCard' style={{ height: 262, boxShadow: ' #d5d5d5 0px 0px 6px 0px' }}  span={24}>
              <Card
                bordered={false}
                style={{ borderRadius: 5 }}
              >

                <Card
                  className={styles.backimg}
                  style={bgBround}
                  bordered={false}
                >

                  <div style={{ marginTop: 0 }} className={styles.composings}>
                    <div style={{ flexBasis: '10%' }}></div>
                    <div style={{ flexBasis: '10%' }}>
                      <Progress
                        className='ycolor'
                        strokeColor='#00c7ff'
                        type="circle"
                        percent={Number(this.state.percent)}
                        strokeWidth={5}
                        width={145}
                        strokeWidth={6}
                        format={this.state.ProgressQH ? '' : () => `${this.state.xsName}分`}
                      />
                    </div>
                    <div style={{ flexBasis: '10%' }}></div>
                    {
                      this.state.ProgressWZ === false ? <div style={{ flexBasis: '30%', marginTop: 50 }}>
                        <p style={{ marginBottom: 0, color: '#fff' }}>{this.state.summary}</p>
                        <p style={{ marginBottom: 0, color: '#fff' }}>体检时间:{this.state.checkTime}</p>
                      </div> : <div style={{ flexBasis: '30%', marginTop: 50 }}>
                          <div style={{ marginBottom: 0, color: '#fff' }} className={styles.center}>
                          <span>知识库体检中</span>
                          <span className={styles.loading}></span>
                          </div>
                          <p style={{ marginBottom: 0, color: '#fff' }}>您可以关掉页面，稍后再来查看</p>
                        </div>
                    }
                    <div style={{ flexBasis: '10%' }}></div>
                    <div style={{ marginTop: 50 }}>
                      {
                        this.state.ProgressWZ === false ? <div onClick={this.detection} className={styles.buttons}>重新检测</div> : null
                      }
                    </div>
                  </div>
                </Card>
              </Card>

              <div style={{ height: 24 }}></div>
              <Row gutter={24}>
                <Col className={styles.colBJ} xl={12} lg={24}>
                  <div style={{ boxShadow: ' #d5d5d5 0px 0px 6px 0px' }} className={styles.gutterBox}>
                    <div style={{ marginRight: 20 }}>
                      <img src={icon1} />
                    </div>
                    <div style={{ margin: '10px 20px 0px 0px' }}>
                      <p style={divStyle}>相似问少</p>
                      <p style={spanStyle}>{this.state.text}</p>
                      <p style={{ marginBottom: 0, color: '#a9a9a9' }}>相似问越多机器人对于该问题理解的越准确，用户不管用什么问法提问都能准确应答</p>
                    </div>
                    <div style={{ flexGrow: 1 }}></div>
                    <div  className={this.state.border === false ? 'a' : 'ButtonATJ'} style={{ marginTop: 10 }}>
                      <Button onClick={this.similarAsk} type={this.state.border === false ? 'primary' : 'primary'}>去维护</Button>
                    </div>
                  </div>
                </Col>
                <Col className={styles.colBJ} xl={12} lg={24}>
                  <div style={{ boxShadow: ' #d5d5d5 0px 0px 6px 0px' }} className={styles.gutterBox}>
                    <div style={{ marginRight: 20 }}>
                      <img src={icon2} />
                    </div>
                    <div style={{ margin: '10px 20px 0px 0px' }}>
                      <p style={divStyle1}>问题数量</p>
                      <p style={spanStyle1}>{this.state.text1}</p>
                      <p style={{ marginBottom: 0, color: '#a9a9a9' }}>建议多维护一些问题，机器人知道的越多，能帮助用户解决的问题也就越多</p>
                    </div>
                    <div style={{ flexGrow: 1 }}></div>
                    <div style={{ marginTop: 10 }} className={this.state.border1 === false ? 'a' : 'ButtonATJ'}>
                      <Button onClick={this.questionNumber} type={this.state.border1 === false ? 'primary' : 'primary'}>去添加</Button>
                    </div>
                  </div>
                </Col>
              </Row>

              <Row gutter={24}>
                <Col className={styles.colBJ} xl={12} lg={24}>
                  <div style={{ boxShadow: ' #d5d5d5 0px 0px 6px 0px' }} className={styles.gutterBox}>
                    <div style={{ marginRight: 20 }}>
                      <img src={icon3} />
                    </div>
                    <div style={{ margin: '10px 20px 0px 0px' }}>
                      <p style={divStyle2}>缺少答案</p>
                      <p style={spanStyle2}>{this.state.text2}</p>
                      <p style={{ marginBottom: 0, color: '#a9a9a9' }}>问题下没有维护答案，建议维护答案或将无用问题删除</p>
                    </div>
                    <div style={{ flexGrow: 1 }}></div>
                    <div style={{ marginTop: 10 }} className={this.state.border2 === false ? 'a' : 'ButtonATJ'}>
                      <Button onClick={this.answer} type={this.state.border2 === false ? 'primary' : 'primary'}>去维护</Button>
                    </div>
                  </div>
                </Col>
                <Col className={styles.colBJ} xl={12} lg={24}>
                  <div style={{ boxShadow: ' #d5d5d5 0px 0px 6px 0px' }} className={styles.gutterBox}>
                    <div style={{ marginRight: 20 }}>
                      <img src={icon4} />
                    </div>
                    <div style={{ margin: '10px 20px 0px 0px' }}>
                      <p style={divStyle3}>未知问题</p>
                      <p style={spanStyle3}>{this.state.text3}</p>
                      <p style={{ marginBottom: 0, color: '#a9a9a9' }}>建议多维护一些问题，机器人知道的越多，能帮助用户解决的问题也就越多</p>
                    </div>
                    <div style={{ flexGrow: 1 }}></div>
                    <div style={{ marginTop: 10 }} className={this.state.border3 === false ? 'a' : 'ButtonATJ'}>
                      <Button onClick={this.unknownProblem} type={this.state.border3 === false ? 'primary' : 'primary'}>去添加</Button>
                    </div>
                  </div>
                </Col>
              </Row>

              <Row gutter={24}>
                <Col className={styles.colBJ} xl={12} lg={24}>
                  <div style={{ boxShadow: ' #d5d5d5 0px 0px 6px 0px' }} className={styles.gutterBox}>
                    <div style={{ marginRight: 20 }}>
                      <img src={icon5} />
                    </div>
                    <div style={{ margin: '10px 20px 0px 0px' }}>
                      <p style={divStyle4}>未解决问题</p>
                      <p style={spanStyle4}>{this.state.text4}</p>
                      <p style={{ marginBottom: 0, color: '#a9a9a9' }}>用户反馈该问题的答案内容没有解决其问题，建议检查答案是否合适或准确</p>
                    </div>
                    <div style={{ flexGrow: 1 }}></div>
                    <div style={{ marginTop: 10 }} className={this.state.border4 === false ? 'a' : 'ButtonATJ'}>
                      <Button onClick={this.unresolvedProblem} type={this.state.border4 === false ? 'primary' : 'primary'}>去查看</Button>
                    </div>
                  </div>
                </Col>
                <Col className={styles.colBJ} xl={12} lg={24}>
                  <div style={{ boxShadow: ' #d5d5d5 0px 0px 6px 0px' }} className={styles.gutterBox}>
                    <div style={{ marginRight: 20 }}>
                      <img src={icon6} />
                    </div>
                    <div style={{ margin: '10px 20px 0px 0px' }}>
                      <p style={divStyle5}>异常问题</p>
                      <p style={spanStyle5}>{this.state.text5}</p>
                      <p style={{ marginBottom: 0, color: '#a9a9a9' }}>问题中的某个问句和该问题下的其他相似句意思不同，建议检查确认后删除</p>
                    </div>
                    <div style={{ flexGrow: 1 }}></div>
                    <div style={{ marginTop: 10 }} className={this.state.border5 === false ? 'a' : 'ButtonATJ'}>
                      <Button onClick={this.unusualTime} type={this.state.border5 === false ? 'primary' : 'primary'}>去查看</Button>
                    </div>
                  </div>
                </Col>
              </Row>

              <Row gutter={24}>
                <Col className={styles.colBJ} xl={12} lg={24}>
                  <div style={{ boxShadow: ' #d5d5d5 0px 0px 6px 0px' }} className={styles.gutterBox}>
                    <div style={{ marginRight: 20 }}>
                      <img src={icon7} />
                    </div>
                    <div style={{ margin: '10px 20px 0px 0px' }}>
                      <p style={divStyle6}>相似问法</p>
                      <p style={spanStyle6}>{this.state.text6}</p>
                      <p style={{ marginBottom: 0, color: '#a9a9a9' }}>有两个问题之间的问句相似，建议检查之后删除其中一个相似问，以保证问题之间的对立性</p>
                    </div>
                    <div style={{ flexGrow: 1 }}></div>
                    <div style={{ marginTop: 10 }} className={this.state.border6 === false ? 'a' : 'ButtonATJ'}>
                      <Button onClick={this.similarityIssue} type={this.state.border6 === false ? 'primary' : 'primary'}>去查看</Button>
                    </div>
                  </div>
                </Col>
              </Row>
            </Row>
          </Spin>
          {/* </div> */}
        </PageHeaderWrapper>
      </Suspense>
    );
  }
}

export default connect(({ user }) => ({ // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(MedicalKnowledge));